<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
	<HEAD>
		<base href="<%=basePath%>">
		<TITLE>个性设置</TITLE>
		<META http-equiv=content-type content="text/html; charset=utf-8">
		<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px
	
}table { 
width:90%; 
border-top:1px solid #e5eff8; 
border-right:1px solid #e5eff8; 
margin:1em auto; 
border-collapse:collapse; 
} 
tr.odd td { 
background:#f7fbff 
} 
tr.odd .column1 { 
background:#f4f9fe; 
} 
.column1 { 
background:#f9fcfe; 
} 
<h6>CSS for example 2</h6> 
<coolcode></coolcode>tr.odd td, 
tr.odd .column1 { 
background:#f4f9fe url(images/background.gif) no-repeat; 
} 
.column1 { 
background:#f9fcfe; 
}
thead th { 
background:#f4f9fe; 
text-align:center; 
font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; 
color:#66a3d3; 
}


</STYLE>
		<LINK href="res/fonts-min.css" type=text/css rel=stylesheet>
		<SCRIPT src="app/bardian/res/yahoo-dom-event.js"
			type=text/javascript></SCRIPT>
		<SCRIPT src="app/bardian/res/animation-min.js"
			type=text/javascript></SCRIPT>

		<SCRIPT src="app/bardian/res/dragdrop-min.js"
			type=text/javascript></SCRIPT>
		<!--begin custom header content for this example-->
		<STYLE type=text/css>
DIV.workarea {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	FLOAT: left;
	PADDING-BOTTOM: 10px;
	PADDING-TOP: 10px
}

DIV.workarea02 {
	PADDING-RIGHT: 2px;
	PADDING-LEFT: 10px;
	FLOAT: left;
	PADDING-BOTTOM: 10px;
	PADDING-TOP: 10px
}

DIV.workarea03 {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 10px;
	PADDING-TOP: 10px
}

UL.draglist {
	BORDER-RIGHT: gray 1px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: gray 1px solid;
	PADDING-LEFT: 0px;
	BACKGROUND: #f7f7f7;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	BORDER-LEFT: gray 1px solid;
	WIDTH: 200px;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: gray 1px solid;
	LIST-STYLE-TYPE: none;
	POSITION: relative;
	HEIGHT: 240px
}

UL.draglist LI {
	MARGIN: 1px;
	CURSOR: move;
	ZOOM: 1
}

UL.draglist_alt {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 20px;
	MARGIN: 0px;
	WIDTH: 200px;
	PADDING-TOP: 0px;
	LIST-STYLE-TYPE: none;
	POSITION: relative
}

UL.draglist_alt LI {
	MARGIN: 1px;
	CURSOR: move
}

LI.list1 {
	BORDER-RIGHT: #7ea6b2 1px solid;
	BORDER-TOP: #7ea6b2 1px solid;
	BORDER-LEFT: #7ea6b2 1px solid;
	BORDER-BOTTOM: #7ea6b2 1px solid;
	BACKGROUND-COLOR: #d1e6ec
}

LI.list2 {
	BORDER-RIGHT: #6b4c86 1px solid;
	BORDER-TOP: #6b4c86 1px solid;
	BORDER-LEFT: #6b4c86 1px solid;
	BORDER-BOTTOM: #6b4c86 1px solid;
	BACKGROUND-COLOR: #d8d4e2
}

LI.list3 {
	BORDER-RIGHT: #7ea6b2 1px solid;
	BORDER-TOP: #ffffff 2px solid;
	BORDER-LEFT: #7ea6b2 1px solid;
	BORDER-BOTTOM: #7ea6b2 1px solid;
	BACKGROUND-COLOR: #d1e6ec
}

#user_actions {
	FLOAT: right
}
</STYLE>
		<!--end custom header content for this example-->
		<META content="MSHTML 6.00.2900.3429" name=GENERATOR>
	</HEAD>
	<BODY class=" yui-skin-sam">
	<form action="bardian.do" id="form01" method="post">
		<table width="600" class="signup" border="1" align="center">
			<tr>
				<td class="fieldcell">显示行数</td>
				<td><input type="text" onkeydown="onlyNum();"  name="viewNum" value="10">
				<input type="hidden"  name="tableName" value="">
				<input type="hidden" name="fieldName" value="">
				<input type="hidden" name="bardian" value="add">  </td>
			</tr>
			<tr>
				<td  colspan="2" align="center" nowrap="nowrap">
					<DIV class=workarea02>
						<H3>
							列序号
						</H3>
						<UL id="row_r">
						</UL>
					</DIV>
					<DIV class=workarea03>
						<H3>
							已选择
						</H3>
						<UL class=draglist id=ul1>

						</UL>
					</DIV>
					<DIV class=workarea>
						<H3>
							选项
						</H3>  
						<UL class=draglist id=ul2>
							<LI class=list2 id=li2_1 bvalue="FANGM:方名">
								方名
							</LI>
							<LI class=list2 id=li2_2 bvalue="biem:别名">
								别名
							</LI>
							<LI class=list2 id=li2_3  bvalue="chufly:处方来源">
							处方来源
							</LI>
							<LI class=list2 id=li2_4 bvalue="yaowzc:药物组成">
								药物组成 
							</LI>
							<LI class=list2 id=li2_5  bvalue="jiaj:加减">
								加减
							</LI>
							<LI class=list2 id=li2_6  bvalue="gongx:功效">
								功效 
							</LI>
								<LI class=list2 id=li2_7  bvalue="id:编号">
								编号
							</LI>
								<LI class=list2 id=li2_8  bvalue="zhibff:制备方法">
								制备方法 
							</LI>
								<LI class=list2 id=li2_9 bvalue="yongfyl:用法用量">
								用法用量 
							</LI>
								<LI class=list2 id=li2_10  bvalue="yongyjj:用药禁忌">
								用药禁忌 
							</LI>
						</UL>
					</DIV>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button"  style="width: 200px; border: 1px solid gray" onclick="submitBar()" value="提交" /></td>
			</tr>
		</table>
</form>
		<SCRIPT type=text/javascript>
function submitBar()
{
	var obj = document.getElementById('ul1');
	var size = obj.childNodes.length;
	var bvalue = "";
	for(var i=0;i<size;i++)
	{
	  var o = obj.childNodes[i];
	  bvalue += o.bvalue+"@";
	}
	
	form01.fieldName.value = bvalue;
	form01.submit();
}
(function() {

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

//////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////
YAHOO.example.DDApp = {
    init: function() {

        var rows=10,cols=2,i,j;
        for (i=1;i<cols+1;i=i+1) {
            new YAHOO.util.DDTarget("ul"+i);
        }

        for (i=1;i<cols+1;i=i+1) {
            for (j=1;j<rows+1;j=j+1) {
                new YAHOO.example.DDList("li" + i + "_" + j);
            }
        }

        Event.on("showButton", "click", this.showOrder);
        Event.on("switchButton", "click", this.switchStyles);
    },

    showOrder: function() {
        var parseList = function(ul, title) {
            var items = ul.getElementsByTagName("li");
            var out = title + ": ";
            for (i=0;i<items.length;i=i+1) {
                out += items[i].id + " ";
            }
            return out;
        };

        var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");

    },

    switchStyles: function() {
        Dom.get("ul1").className = "draglist_alt";
        Dom.get("ul2").className = "draglist_alt";
    }
};

//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDList = function(id, sGroup, config) {

    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);

    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

    this.goingUp = false;
    this.lastY = 0;
};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

    startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");

        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "visibility", "hidden");

        dragEl.innerHTML = clickEl.innerHTML;

        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
        Dom.setStyle(dragEl, "border", "2px solid gray");
    },

    endDrag: function(e) {

        var srcEl = this.getEl();
        var proxy = this.getDragEl();

        // Show the proxy element and animate it to the src element's location
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion( 
            proxy, { 
                points: { 
                    to: Dom.getXY(srcEl)
                }
            }, 
            0.2, 
            YAHOO.util.Easing.easeOut 
        )
        var proxyid = proxy.id;
        var thisid = this.id;

        // Hide the proxy and show the source element when finished with the animation
        a.onComplete.subscribe(function() {
                Dom.setStyle(proxyid, "visibility", "hidden");
                Dom.setStyle(thisid, "visibility", "");
            });
        a.animate();
    },

    onDragDrop: function(e, id) {
 	//id等于要落下的div id 如果直接返回将落不下去
	 setRow();

        // If there is one drop interaction, the li was dropped either on the list,
        // or it was dropped on the current location of the source element.
        if (DDM.interactionInfo.drop.length === 1) {

            // The position of the cursor at the time of the drop (YAHOO.util.Point)
            var pt = DDM.interactionInfo.point; 

            // The region occupied by the source element at the time of the drop
            var region = DDM.interactionInfo.sourceRegion; 

            // Check to see if we are over the source element's location.  We will
            // append to the bottom of the list once we are sure it was a drop in
            // the negative space (the area of the list without any list items)
            if (!region.intersect(pt)) {
                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
               setRow();
            }

        }
    },

    onDrag: function(e) {
  
        // Keep track of the direction of the drag for use during onDragOver
        var y = Event.getPageY(e);

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
    	
        var srcEl = this.getEl();
        var destEl = Dom.get(id);

        // We are only concerned with list items, we ignore the dragover
        // notifications for the list.
        if (destEl.nodeName.toLowerCase() == "li") {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;

            if (this.goingUp) {
            
                p.insertBefore(srcEl, destEl); // insert above
            } else {
                p.insertBefore(srcEl, destEl.nextSibling); // insert below
            }

            DDM.refreshCache();
        }
    }
});

Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

})();
/**********列与数据同步*****/
function setRow()
{
	var o1= document.getElementById('row_r');
	var o2= document.getElementById('ul1');
  var rn = o1.childNodes.length;
  var rs = o2.childNodes.length;
  if(rn>rs)
  {
	 	for(var i=0;i<(rn-rs);i++)
	 	{
	 			o1.removeChild(o1.childNodes[o1.childNodes.length-1]);
	 	}
  }
 	if(rn<rs)
 	{
 	
 		for(;rn<rs;rn++){
 			o1.innerHTML += '<LI class=list3 id="row_0" >第'+(rn+1)+'列 </LI>';
 		}
 	}
}
 
function onlyNum() 
{ 
if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39)) 
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105))) 
event.returnValue=false; 
} 

</SCRIPT>
	</BODY>
</HTML>